<template>
<div class>
    <!--面包屑-->
    <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
    <div class="banner">
        <div class="archives-list-box mb-10">
            <h1 class="Basics-title">
                <h2>信访举报</h2>
            </h1>

            <div class="top1">
                <div class="left">
                    <span>年份：</span>
                    <el-date-picker v-model="year" value-format="yyyy" type="year" placeholder="请选择年份" class="second"></el-date-picker>
                    <span>举报标题：</span>
                    <el-input v-model="title" class="first" placeholder="请输入举报标题"></el-input>
                    <span>举报人：</span>
                    <el-input v-model="person" class="first"></el-input>
                    <el-button type="primary" class="five" @click="search">查询</el-button>
                    <el-button class="five" @click="goBack">重置</el-button>
                </div>
            </div>

            <el-table ref="multipleTable" :data="tableArchives" tooltip-effect="dark" style="width: 100%" border>
                <el-table-column type="index" label="序号" width="52" align="center"></el-table-column>
                <el-table-column prop="year" label="年份" width="100" align="center"></el-table-column>
                <el-table-column prop="name" label="举报人" min-width="150" align="center"></el-table-column>
                <el-table-column prop="title" label="举报标题" width="610"></el-table-column>
                <el-table-column prop="issueType" label="举报类型" width="166" align="center"></el-table-column>
                <el-table-column prop="createdTime" label="举报时间" width="166" align="center"></el-table-column>
                <el-table-column prop="status" label="受理程度" width="166" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status==='0'">待处理</span>
                        <span v-if="scope.row.status==='1'">已受理</span>
                        <span v-if="scope.row.status==='2'">已驳回</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="121" align="center">
                    <template slot-scope="scope">
                        <el-button type="BasicsLook" @click="lookArchive">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <!-- 分页开始 -->
            <Pagination :total="total" :params="params" :get="getList"></Pagination>
            <!-- 分页结束 -->
        </div>
    </div>
</div>
</template>

<script>
//面包靴
import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
// 分页器
import Pagination from "@/components/Popup/Pagination.vue";
export default {
    components: {
        Breadcrumb,
        BaiduMap,
        Pagination
    },
    data() {
        return {
            // 档案名称
            name: "",
            // 年份
            year: null,
            title: "",
            person: "",
            //    分页
            currentPage4: 1,
            //面包靴跳转数据
            Breadcrumb: [{
                    name: "廉政档案",
                    link: "IncorruptibleArchives",
                },
                {
                    name: "监督对象",
                    link: "supervise",
                },
                {
                    name: "监督对象详情",
                    link: "supervisedetail",
                },
                {
                    name: "更多信访举报",
                    link: "AddLette",
                },
            ],
            //档案列表
            tableArchives: [],
            params: {
                pageNum: 1,
                pageSize: 10,
                personId: this.$route.query.id,
            },
            total: 0,
        };
    },
    created() {
        this.getList();
    },
    mounted() {},
    methods: {
        search() {
            this.params = {
                pageNum: 1,
                pageSize: 10,
                personId: this.$route.query.id,
                year: this.year,
                title: this.title,
                name: this.name,
            }
            this.getList();
        },
        goBack() {
            this.name = "";
            this.year = null;
            this.title = "";
            this.params = {
                pageNum: 1,
                pageSize: 10,
                personId: this.$route.query.id,
                year: this.year,
                title: this.title,
                name: this.name,
            }
            this.getList();
        },
        //获取列表数据
        getList() {
            this.Api.getSuperviseComplainMore(this.params).then((res) => {
                // console.log(res, "获取监督对象列表更多");
                if (res.code === "0" && res) {
                    this.tableArchives = res.data.records;
                    this.total = res.data.total;
                }
                let strjsonlist = localStorage.getItem("SET_DICTIONARIES");
                let jsonList = JSON.parse(strjsonlist);
                let downlist = jsonList.filter((item, index) => {
                    return item.typeCode === "ISSUE_TYPE";
                });
                this.tableArchives.forEach((item, index) => {
                    downlist[0].itemList.forEach((v, i) => {
                        if (item.issueType === v.itemValue) {
                            item.issueType = v.itemName
                        }
                    })
                })
            });
        },
        // 档案列表编辑
        goArchiveEdit() {
            this.$router.push({
                name: "AddArchives",
                query: {
                    isbuild: false,
                },
            });
        },
        // 档案列表查看
        lookArchive() {
            this.$router.push({
                name: "LetterLook",
            });
        },
    },
};
</script>

<style lang="less" scoped>
.banner {
    width: 1580px;
    min-height: 892px;
    background: white;
    box-sizing: border-box;
}

.archives-list-box {
    padding: 20px;
    background-color: white;

    /deep/.el-table__header-wrapper {
        .has-gutter {
            tr {
                th {
                    padding: 10px 0;
                    background-color: #fafafa;
                    color: rgba(0, 0, 0, 0.85);
                }
            }
        }
    }
}

.mb-10 {
    margin-bottom: 10px;
}

.companyName span {
    display: inline-block;
    width: 70px;
    height: 14px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    line-height: 14px;
}

//按钮的统一样式
.el-button {
    width: 70px;
    height: 30px;
    padding: 0;
    font-size: 14px;
}

//新建按钮
/deep/.el-button--BasicsBuild {
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(61, 127, 255, 1);
    color: rgba(61, 127, 255, 1);
}

//修改按钮
.el-button--change {
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(61, 127, 255, 1);
    color: #3d7fff;
}

//详情按钮
// .el-button--detail {
//   background: rgba(255, 255, 255, 1);
//   border-radius: 4px;
//   border: 1px solid rgba(221, 221, 221, 1);
//   color: #333333;
// }
//档案列表查看
//查看按钮
/deep/.el-button--BasicsLook {
    width: 33px;
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(22, 119, 255, 1);
    line-height: 22px;
    border: 0;
}

//编辑按钮
/deep/.el-button--BasicsEdit {
    width: 33px;
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(22, 119, 255, 1);
    line-height: 22px;
    margin-left: 14px;
    border: 0;
}

//删除按钮
/deep/.el-button--BasicsClear {
    width: 33px;
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(22, 119, 255, 1);
    line-height: 22px;
    margin-left: 14px;
    border: 0;
}

.Basics-title {
    padding: 0 0 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    background-color: white;

    .button-group-right {}

    >h2 {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 16px;
        border-left: 4px solid #3d7fff;
        padding: 0 0 0 10px;
    }
}

.top1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.left {
    display: flex;
    margin-top: 19px;
    align-items: center;
}

.right {
    margin-top: 19px;
}

/deep/.left .el-input__inner {
    width: 260px;
    height: 36px;
}

/deep/.left .el-input {
    width: 154px;
}

.left span {
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #333333;
}

.five {
    width: 58px;
    height: 36px;
}

/deep/.el-icon-date:before {
    content: "\e78e";
    margin-left: 230px;
}

.first,
.second,
.third {
    margin-right: 120px;
}

.fenye {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
</style>
